<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 50px;
            height: 50px;
            background: red
        }
    </style>
</head>

<body>
    <div id="box">111</div>
    <script type="text/javascript">
        ;
        (function(doc) {
            var Touch = function(selector) {
                return Touch.prototype.init(selector)
            }

            Touch.prototype = {
                init: function(selector) {
                    if (typeof(selector) == 'string') {
                        this.elem = doc.querySelector(selector)
                        return this
                    }
                },

                tap: function(callback) {
                    this.elem.addEventListener('touchstart', fn)
                    this.elem.addEventListener('touchend', fn)
                    var sTime,
                        eTime;

                    function fn(e) {
                        e.preventDefault();
                        switch (e.type) {
                            case 'touchstart':
                                sTime = new Date().getTime();
                                break;
                            case 'touchend':
                                eTime = new Date().getTime()
                                if (eTime - sTime < 500) {
                                    callback.call(this, e)
                                }
                                break;
                        }
                    }
                },

                longtap: function(callback) {
                    this.elem.addEventListener('touchstart', fn, false);
                    this.elem.addEventListener('touchmove', fn, false);
                    this.elem.addEventListener('touchend', fn, false);

                    var t = null,
                        _self = this;

                    function fn(e) {
                        switch (e.type) {
                            case 'touchstart':
                                t = setTimeout(function() {
                                    callback.call(_self, e);
                                }, 500)
                                break;
                            case 'touchmove':
                                clearTimeout(t);
                                t = null;
                                break;
                            case 'touchend':
                                clearTimeout(t)
                                t = null;
                                break;
                        }
                    }
                }
            }
            window.$ = window.Touch = Touch;
        }(document))
        console.log($('#box'))
        $('#box').tap(function(e) {
            console.log(1)
        })
        $('#box').longtap(function(e) {
            console.log(2)
        })
    </script>
</body>

</html>